<template>
  <!-- 菜品列表的头部 -->
  <div class="top" >
    <!-- left没什么用，只是为了弹性布局方便 -->
    <div class="left" @click="ret">返回</div>
    <div class="title">菜品列表</div>
    <div class="right">餐厅选择</div>
  </div>
</template>

<script>
export default {
  name: "top",
  methods: {
    ret() {
      this.$router.back();
    },
  },
};
</script>

<style lang='less' scoped>
.top {
  box-sizing: border-box;
  width: 100%;
  height: 13.3333vw;
  padding: 0 1.6vw;
  display: flex;
  justify-content: space-between;
  background: #e74e40;
  color: white;
  > div {
    text-align: center;
    width: 33%;
    line-height: 13.3333vw;
  }
  .title {
    font-size: 4.8vw;
  }
  .right {
    font-size: 3.7333vw;
  }
}
</style>